<template>
  <view>
    <fui-nav-bar isOccupy isFixed background="#0052D9" title="领用档案" color="#fff" @leftClick="leftClick">
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
      <template v-slot:right>
        <fui-icon color="#fff" @click="clickItem" name="plus"></fui-icon>
      </template>
    </fui-nav-bar>

    <view class="head">
      <view class="ipt">
        <u--input placeholder="请输入" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
      </view>
      <view class="screen" @click="screen">
        <image class="img" src="/static/images/index/shaixuan.svg" mode=""></image>
        筛选
      </view>
    </view>

    <view class="task-item" v-for="(i, index) in list" :key="index" @click="handleTodo">
      <view class="task-icon">图片</view>
      <view class="task-main">
        <view class="task-content__title">
          <view>
            {{ i.name }}
          </view>
        </view>
        <view class="task-content__desc">
          <view>备件编码：{{ i.code }}</view>
        </view>
        <view class="task-content__desc">
          <view>规格型号：{{ i.type }}</view>
        </view>
        <view class="task-content__desc">
          <view>总库存：{{ i.count }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
const list = reactive([
  {
    id: 0,
    name: '备件00100',
    type: '30*30*50',
    code: 'SB5666568',
    count: 10,
    specifications: '电梯设备备件类型11',
    addCount: 0
  },
  {
    id: 1,
    name: '备件222',
    type: '30*30*50',
    code: 'SB1234268',
    count: 20,
    specifications: '电梯设备备件类型22',
    addCount: 0
  },
  {
    id: 2,
    name: '备件33333',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  },
  {
    id: 3,
    name: '备件5555',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  },
  {
    id: 4,
    name: '备件6666',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  },
  {
    id: 4,
    name: '备件6666',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  },
  {
    id: 4,
    name: '备件6666',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  }
]);

const leftClick = () => {
  uni.navigateBack();
};

const screen = () => {
  uni.navigateTo({
    url: './audit'
  });
};

const handleTodo = () => {
  uni.navigateTo({
    url: './info'
  });
};

const clickItem = () => {
  uni.navigateTo({
    url: './add'
  });
};
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}
.head {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 120rpx;
  padding: 20rpx;
  // margin-bottom: 24rpx;
  .ipt {
    flex: 1;
    margin-left: 25rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
  }

  .screen {
    // width: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }
}
.task-item {
  width: 100%;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  color: #0052db;
  .task-icon {
    width: 30%;
    background: #0052db;
    color: #fff;
    border-radius: 6rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .task-main {
    height: 100%;
    width: 70%;
    padding-left: 20rpx;
    box-sizing: border-box;
    .task-content__title {
      width: 100%;
      height: 50%;
      font-weight: bolder;
      color: #000000;
      // font-size: 25rpx;
    }
    .task-content__desc {
      width: 100%;
      height: 50%;
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      font-size: 25rpx;
      align-items: center;
      color: #909399;
    }
    .stepper {
      display: flex;
      margin-right: 10rpx;
      align-items: center;
      .left {
        margin-right: 30rpx;
        border: 1px solid #0052db;
        border-radius: 10rpx;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
      }
      .count {
        margin-right: 30rpx;
      }
      .right {
        margin-right: 10rpx;
        border: 1px solid #0052db;
        border-radius: 10rpx;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
      }
    }
  }
}
</style>
